<template>
  <div class="comp-wrap filter">
    <van-form>
      <van-cell-group>
        <div v-for="(item, fieldId) in screenObj" :key="fieldId">
          <template v-if="item.fieldType == 1">
            <van-field label-width="180px" v-model="screenObj[fieldId].value" :name="fieldId" placeholder="请输入">
              <template #label>
                <van-space>
                  <span class="field-title ignore">{{ item.fieldName }}</span>
                  <van-tag>包含</van-tag>
                </van-space>
              </template>
            </van-field>
          </template>
          <template v-else-if="item.fieldType == 2">
            <van-field label-width="180px" is-link readonly v-model="item.value" @click="showPicker(fieldId)" :name="fieldId" placeholder="请选择">
              <template #label>
                <van-space>
                  <span class="field-title ignore">{{ item.fieldName }}</span>
                  <van-tag>包含</van-tag>
                </van-space>
              </template>
            </van-field>
          </template>
          <template v-else-if="item.fieldType == 3">
            <van-field label-width="180px" is-link v-model="screenObj[fieldId].value" @click="showPicker(fieldId)" :name="fieldId" placeholder="请选择">
              <template #label>
                <van-space>
                  <span class="field-title ignore">{{ item.fieldName }}</span>
                  <van-tag>包含</van-tag>
                </van-space>
              </template>
            </van-field>
          </template>
          <template v-else-if="item.fieldType == 4">
            <van-field label-width="180px" is-link @click="showPicker(fieldId)" :name="fieldId" placeholder="请选择">
              <template #input>
                <van-space>
                  <p style="color: #c8c9cc" v-if="!screenObj[fieldId].value">请选择</p>
                  <template v-else>
                    <span style="color: #323233" v-for="(sub, i) in screenObj[fieldId].value" :key="i">{{ sub?.uesrName }}</span>
                  </template>
                </van-space>
              </template>
              <template #label>
                <van-space>
                  <span class="field-title ignore">{{ item.fieldName }}</span>
                  <van-tag>包含</van-tag>
                </van-space>
              </template>
            </van-field>
          </template>
          <template v-else-if="item.fieldType == 5 || item.fieldType == 6">
            <van-field label-width="180px" v-model="screenObj[fieldId].value" :name="fieldId" placeholder="请输入">
              <template #label>
                <van-space>
                  <span class="field-title ignore">{{ item.fieldName }}</span>
                  <van-tag @click.stop="conditionBtn(fieldId)">{{ item.condition?.fieldName || '等于' }}<van-icon name="arrow-down" /></van-tag>
                </van-space>
              </template>
            </van-field>
          </template>
          <template v-else-if="item.fieldType == 7">
            <van-field label-width="180px" is-link @click="showDate(fieldId)" :name="fieldId" placeholder="请输入">
              <template #label>
                <van-space>
                  <span class="field-title ignore">{{ item.fieldName }}</span>
                  <van-tag>在区间</van-tag>
                </van-space>
              </template>
              <template #input>
                <van-space>
                  <span style="color: #c8c9cc" v-if="!screenObj[fieldId].value">请选择</span>
                  <template v-else>
                    <span style="color: #323233">{{ screenObj[fieldId].value?.startDate }}-{{ screenObj[fieldId].value?.endtDate }}</span>
                  </template>
                </van-space>
              </template>
            </van-field>
          </template>
        </div>
      </van-cell-group>
    </van-form>
    <!-- 弹窗相关 START -->
    <!-- 条件类型 -->
    <van-popup v-model:show="conditonBool" position="bottom">
      <van-picker title="条件类型" :columns="conditionObj?.list" :columns-field-names="{ text: 'fieldName', values: 'fieldValue' }" @confirm="conditionConfirm" @cancel="conditonBool = false" />
    </van-popup>
    <!-- 选择类型 -->
    <van-popup v-model:show="pickerBool" position="bottom">
      <!-- 客户类型 -->
      <template v-if="fieldObj.fieldType == 2 || fieldObj.fieldType == 3">
        <van-checkbox-group class="select-box ignore" icon-size="24px" v-model="checktVal">
          <van-cell-group>
            <van-cell v-for="(item, index) in fieldObj.choiceValueList" clickable :key="item.fieldValue" :title="item.fieldName" @click="toggle(index)">
              <template #right-icon>
                <van-checkbox :name="item.fieldValue" :ref="(el) => (checkboxRefs[index] = el)" @click.stop />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </template>
      <template v-if="fieldObj.fieldType == 4">
        <van-checkbox-group class="select-box ignore" icon-size="24px" v-model="checktVal">
          <van-cell-group>
            <van-cell v-for="(item, index) in fieldObj.choicePersonList" clickable :key="item.userId" :title="item.uesrName" @click="toggle(index)">
              <template #icon>
                <van-image fit="cover" round class="headimg" :src="item.avatarUrl" />
              </template>
              <template #right-icon>
                <van-checkbox :name="item.userId" :ref="(el) => (checkboxRefs[index] = el)" @click.stop />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </template>
      <van-row justify="space-around" style="padding-bottom: 20px">
        <van-col :span="10">
          <van-button class="btn" block @click="closePicker()">取消</van-button>
        </van-col>
        <van-col :span="10">
          <van-button class="btn" block type="primary" @click="confirmBtn">确认</van-button>
        </van-col>
      </van-row>
    </van-popup>
    <!-- 日期类型 -->
    <van-calendar v-model:show="dateObj.show" type="range" @confirm="confirmDate" />
  </div>
</template>

<script setup>
import dayjs from 'dayjs';
import { apiService } from '@/api';
import { ref } from 'vue';
const screenObj = ref({});
const fieldObj = ref({});

// const conditionVal = ref('');
const conditonBool = ref(false);
const dateObj = ref({
  fieldId: '',
  show: false
});
const showDate = (fieldId) => {
  dateObj.value = {
    fieldId,
    show: true
  };
};
const confirmDate = (value) => {
  screenObj.value[dateObj.value.fieldId].value = {
    startDate: dayjs(value[0]).format('YYYY-MM-DD'),
    endtDate: dayjs(value[1]).format('YYYY-MM-DD')
  };
  dateObj.value = {};
};
const checktVal = ref([]);
const checkboxRefs = ref([]);
const toggle = (index) => {
  checkboxRefs.value[index].toggle();
};
const conditionObj = ref({});
const pickerBool = ref(false);
const closePicker = () => {
  pickerBool.value = false;
};
const confirmBtn = () => {
  if (fieldObj.value.fieldType == 4) {
    fieldObj.value.value = checktVal.value.map((userId) => {
      return fieldObj.value.choicePersonList.find((item) => item.userId == userId);
    });
  } else {
    fieldObj.value.value = JSON.parse(JSON.stringify(checktVal.value));
  }
  checktVal.value = [];
  closePicker();
};
const conditionBtn = (field) => {
  conditionObj.value.list = (screenObj.value[field]?.choiceConditionList || []).map((item) => {
    item.text = item.fieldName;
    item.value = item.fieldKey;
    return item;
  });
  conditionObj.value.fieldId = field;
  conditonBool.value = true;
};
const conditionConfirm = (value) => {
  screenObj.value[conditionObj.value.fieldId].condition = value.selectedOptions[0];
  conditonBool.value = false;
};
//显示选择框
const showPicker = (field) => {
  pickerBool.value = true;
  fieldObj.value = screenObj.value[field];
  if (fieldObj.value.fieldType == 4) {
    checktVal.value = (fieldObj.value?.value || []).map((user) => {
      return user.userId;
    });
  } else {
    checktVal.value = fieldObj.value?.value || [];
  }
};
defineProps({
  data: {
    type: Object,
    default: () => {}
  }
});
apiService.getConditoin().then((res) => {
  res.result?.screenList?.forEach((item) => {
    screenObj.value[item.fieldId] = item;
  });
});
const getFilter = () => {
  const filterList = [];

  Object.values(screenObj.value).forEach((item) => {
    const filterItem = { fieldId: item.fieldId, fieldName: item.fieldName, fieldType: item.fieldType };
    if (!item.value) return false;
    if (item.fieldType == 1) {
      //filterItem.condition = 0;
      filterItem.fieldValue = item.value;
    } else if (item.fieldType == 2 || item.fieldType == 3) {
      // filterItem.condition = 0;
      filterItem.fieldValue = item.value.toString();
    } else if (item.fieldType == 4) {
      //filterItem.condition = 0;
      filterItem.fieldValueList = item.value.map((it) => it.userId);
    } else if (item.fieldType == 5 || item.fieldType == 6) {
      filterItem.condition = item.condition?.fieldKey;
      filterItem.numberValue = item.value;
    } else if (item.fieldType == 7) {
      //filterItem.condition = 1;
      filterItem.startDate = item.value.startDate;
      filterItem.endtDate = item.value.endtDate;
    }
    filterList.push(filterItem);
  });
  return filterList;
};
const resetFilter = () => {
  Object.values(screenObj.value).forEach((item) => {
    item.value = '';
  });
};
defineExpose({
  getFilter,
  resetFilter
});
</script>
<style scoped lang="less">
@import './filter-condition.less';
</style>
